<template>
	<div class="ani_wrapper">
		<img v-for="(item,index) in ani_arr" 
		:src="item" :alt="index"
		:key="index"
		:style="{'opacity':curIndex==index?'1':'0'}">
	</div>
</template>

<script>
	import DataAni from "@/data/animation.json";
	// let count = 0;
	function preloadImg(src){
		var img = new Image();
		img.src = src;
		img.onload = function(){
			// console.log(count++)
		}
	}
	DataAni.forEach(src=>preloadImg(src))
	// let timer = null;
	export default {
		data(){
			return {
				ani_arr:DataAni,
				curIndex:0,
				timer:null
			}
		},
		mounted() {
			this.timer = setInterval(()=>{
				this.curIndex++;
				if(this.curIndex>this.ani_arr.length){
					this.curIndex=0;
				}
			},25)
		}
	}
</script>

<style lang="scss">
	@function px2vw($px) {
		@return $px * 100/750 * 1vw;
	}
	.ani_wrapper {
		position: relative;
		height: 84.8vw;
		width: 84.8vw;
		// background-color: #bb3e9f;
		>img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}
</style>
